<!--
 * @Author: your name
 * @Date: 2021-12-30 09:27:09
 * @LastEditTime: 2022-01-06 14:37:23
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am-master\am-ui\src\pages\am\order\List.vue
-->
<template>
  <div class="orderList">
    <!-- 按钮查询区域 -->
    <div class="btns">
        <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item 
        :label-width="formLabelWidth"
        prop="status">
          <el-select 
          v-model="params.status" 
          placeholder="请选择工单状态"
          clearable>
            <el-option label="待接单" value="待接单"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearchHandler">搜索</el-button>
        </el-form-item>
    </el-form>
    </div>
    <!-- 标签页 -->
    <el-tabs v-model="params.type" @tab-click="tabHandleClick">
      <el-tab-pane label="安装" name="安装">
      </el-tab-pane>
      <el-tab-pane label="维修" name="维修">
      </el-tab-pane>
      <el-tab-pane label="拆机" name="拆机">
      </el-tab-pane>
    </el-tabs>
    <!-- 表格区域 -->
      <el-table
      :data="resData.list"
      style="width: 100%">
      <el-table-column 
      type="index" 
      label="序号" 
      width="60px" 
      align="center"> </el-table-column>
      <el-table-column
      align="center"
      label="工程"
      prop="engineer_name"
      width="250px"
      >
      </el-table-column>
      <el-table-column
        label="设备"
        prop="device_name"
        align="center"
        width="230">
      </el-table-column>
      <el-table-column
        label="状态"
        prop="status"
        align="center"
        width="80">
        <template v-slot="{ row }">
          <el-tag 
            v-if="row.status == '待接单'"
            type="danger">{{row.status}}</el-tag>
          <el-tag v-else-if="row.status == '进行中'"
          type="warning">{{row.status}}</el-tag>
          <el-tag v-else type="success">{{row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        prop="type"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        label="工人"
        prop="account_name"
        align="center"
        width="80">
          <template v-slot="{ row }">
            <el-tag v-if="row.account_name == null"
            type="info">暂未接单</el-tag>
            <el-tag v-else
            type="success">{{row.account_name}}</el-tag>
          </template>
      </el-table-column>
      <el-table-column
        label="报修原因"
        prop="bill_why"
        align="center"
        width="200">
        <template v-slot="{ row }">
          <span v-if="row.bill_why == null">暂无</span>
          <span v-else>{{ row.bill_why }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="报修时间"
        prop="create_time"
        align="center"
        width="200">
        <template v-slot="{ row }">
          <span>{{ row.create_time | fmtTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        prop="desc"
        align="center">
        <template v-slot="{ row }">
          <el-button 
          type="text" 
          size="mini" 
          @click="toDetailHandler(row)">详情</el-button>
          <el-button 
          type="text" 
          size="mini"
          @click="toCancelHandler(row.id)"
          style="color: red">取消</el-button>
        </template>
        
    </el-table-column>
      </el-table>
    <!-- 分页组件区域 -->
    <el-pagination
      background
      style="margin-top: 1em"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parseInt(resData.page)"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="parseInt(resData.pageSize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parseInt(resData.total)"
    >
    </el-pagination>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data(){
    return{
      params:{
        page:1,
        pageSize:10,
        type:"安装",
      },
      resData:{},
      
    };
  },
  computed: {},
  methods:{
    //分页多条件查询工单详情
    findAllOrders(){
      get("/workorder/pageQuery",this.params).then((res) =>{
        this.resData = res.data;
      })
   },
     // pageSize改变事件
    handleSizeChange(pageSize) {
      // 将分页插件最新的参数赋值给params
      this.params.pageSize = pageSize;
      // 调用查询设备的方法（数据重载）
      this.findAllOrders();
    },
    // page改变事件
    handleCurrentChange(page) {
      this.params.page = page;
      this.findAllOrders();
    },
    //标签页点击函数
    tabHandleClick(){
      this.findAllOrders();
    },
    //搜索按钮
    toSearchHandler(){
      this.findAllOrders();
    },
    //详情按钮
    toDetailHandler(row){
      //页面跳转
      this.$router.push({ path:'/am/order/Details',
      query:row,
      });
    },
    //取消按钮
    /* toCancelHandler(){
    }, */
  },
  created(){
    this.findAllOrders();
  },
};
</script>